<template>
  <div class="wrap">
    <div class="w-title">
      我买到的
    </div>
    <a-tabs @change="getBought" v-model="type">
      <a-tab-pane tab="全部" key="all"></a-tab-pane>
      <a-tab-pane tab="交易中" key="1"></a-tab-pane>
      <a-tab-pane tab="交易完成" key="3"></a-tab-pane>
      <a-tab-pane tab="已关闭" key="0"></a-tab-pane>
      <a-tab-pane tab="售后" key="2"></a-tab-pane>
      <a-input-search
        slot="tabBarExtraContent"
        placeholder="输入订单短号/商品编号/关键字"
        v-model="search"
        @search="getBought"
        enterButton="搜索商品"
        class="search"
      />
    </a-tabs>

    <a-select defaultValue="all" style="width: 220px" v-model="cateId" @change="getBought">
      <a-select-option v-for="(item,index) in arrSelect" :key="index" :value="item.key">{{item.val}}</a-select-option>
    </a-select>

    <a-table
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      rowKey="order_id"
      class="table"
    >
      <template slot="name" slot-scope="text, record">
        <a-row type="flex">
          <div>
            <img :src="record.game_icon" alt srcset class="table-img" />
          </div>
          <div>
            <div class="table-n">{{record.game_title}}</div>
            <!-- <div>商品类型：游戏币</div> -->
            <div>{{record.list_name}} {{record.wow}} {{record.twow}}</div>
          </div>
        </a-row>
      </template>
      <template slot="game_price" slot-scope="text">{{text}}</template>
      <template slot="create_time" slot-scope="text">{{text}}</template>
      <template slot="order_number" slot-scope="text">{{text}}</template>
      <template slot="game_type" slot-scope="text">{{text}}</template>
      <template slot="operation" slot-scope="text,record">
        <template slot="sold" slot-scope="text">{{text}}</template>
        <a-button type="link" v-if="record.type  == 3" @click="onEvaluate(record)">评价</a-button>
        <a-button type="link" v-if="record.type  == 1" @click="showConfirm(record,'确认收货',1)">确认收货</a-button>
        <a-button type="link" v-if="record.type  == 1" @click="showConfirm(record,'退款',2)">退款</a-button>
      </template>
    </a-table>
    <div class="pagination">
      <a-pagination showQuickJumper v-model="page" :total="total" @change="onChange" />
    </div>
    <a-modal title="评价" v-model="visible" @ok="handleOk" @cancel="close">
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="评价">
          <a-radio-group v-decorator="['radio',{
            initialValue:'1'
          }]">
            <a-radio value="1">好评</a-radio>
            <a-radio value="2">中评</a-radio>
            <a-radio value="3">差评</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="星级">
          <a-row type="flex" style="margin-top: -2px;">
            <div v-for="(item,index) in xArr" :key="index">
              <img
                src="~/static/x1.png"
                alt
                style="margin-right: 8px;cursor: pointer;"
                @click="onX(index,'x1')"
                v-if="item.type"
              />
              <img
                src="~/static/x0.png"
                alt
                style="margin-right: 8px;cursor: pointer;"
                @click="onX(index,'x0')"
                v-else
              />
            </div>
          </a-row>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal :title="'申请退款'" v-model="isRefund" @ok="handleOkTwo" @cancel="closeTwo">
      <div class="refund" v-if="refundGanme">
        <div class="r-one">
          <img class="r-img" :src="refundGanme.game_icon">
          <div class="ro-title">{{refundGanme.game_title}}</div>
        </div>
        <div class="r-two">
          <div class="rt-item">
            <div class="ri-title">退款金额：</div>
            <div>¥{{refundGanme.price}}</div>
          </div>
          <div class="rt-item">
            <div class="ri-title">退款原因：</div>
            <div>
              <a-select placeholder="选择原因" style="width: 300px" @change="handleChange">
                <a-select-option v-for="item in reason" :key="item.reason_id">{{
                  item.title
                }}</a-select-option>
              </a-select>
            </div>
          </div>
          <div class="rt-item">
            <div class="ri-title">退款说明：</div>
            <div>
              <a-textarea
                v-model="rvalue"
                style="width: 300px; height: 94px;" 
                placeholder="请输入说明"
                :autoSize="{ minRows: 2, maxRows: 4 }"
              />
            </div>
          </div>
          <div class="rt-item">
            <div class="ri-title">上传凭证：</div>
            <div>
              <a-upload
                name="icon"
                listType="picture-card"
                :showUploadList="false"
                :customRequest="customRequest"
              >
                <img v-if="icon" :src="icon" alt="icon" style="width: 102px; height: 102px;" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
            </div>
          </div>
        </div>
      </div>
    </a-modal>



  </div>
</template>

<script>
var qiniu = require("qiniu-js");
import { MY_BOUGHT, EVALUATE_TO, BUTTON_MONEY, GET_REFUND, UP_TOKEN, SET_APPLY } from "../server";
const columns = [
  {
    title: "商品",
    dataIndex: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "金额（元）",
    dataIndex: "game_price",
    scopedSlots: { customRender: "game_price" }
  },
  {
    title: "时间",
    dataIndex: "create_time",
    scopedSlots: { customRender: "create_time" }
  },
  {
    title: "订单号",
    dataIndex: "order_number",
    scopedSlots: { customRender: "order_number" }
  },
  {
    title: "订单状态",
    dataIndex: "game_type",
    scopedSlots: { customRender: "game_type" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

export default {
  layout: "main",
  data() {
    return {
      arrSelect: [
        { key: "all", val: "全部商品类型" },
        { key: "1", val: "账号" },
        { key: "2", val: "装备" },
        { key: "3", val: "游戏币" },
        { key: "4", val: "深渊票" }
      ],
      columns,
      isRefund: false,
      list: [],
      total: 0,
      page: 1,
      type: "all",
      cateId: "all",
      search: "",
      visible: false,
      form: this.$form.createForm(this, { name: "p" }),
      xArr: [],
      orderId: "",
      loading: false,
      refundGanme: null,
      reason: [],
      qnToken: '',
      rtype: '',
      rvalue: '',
      icon: '',
    };
  },
  created() {
    if (this.$route.params.tid) {
      this.type = this.$route.params.tid;
    }
    this.getBought();
    this.getToken()
  },
  methods: {
    getToken() {
      UP_TOKEN().then(res => {
        this.qnToken = res.data
      })
    },
    showConfirm(item, name, type) {
      this.refundGanme = item
      let that = this;
      this.$confirm({
        title: `是否${name}?`,
        onOk() {
          if (type == 1) {
            BUTTON_MONEY({
              order_id: item.order_id,
              type
            }).then(res => {
              that.getBought();
            })
          } else if (type == 2) {
            GET_REFUND().then(res => {
              that.reason = res.data
            });
            that.isRefund = true
          }
        },
        onCancel() {}
      });

      // this.refundGanme = item
      // let that = this;
      // this.$confirm({
      //   title: `是否${name}?`,
      //   onOk() {
      //   },
      //   onCancel() {}
      // });
    },
    onX(i, type) {
      if (type == "x1") {
        for (let k = 4; k > i; k--) {
          this.xArr[k].type = false;
        }
      } else {
        for (let k = 0; k <= i; k++) {
          this.xArr[k].type = true;
        }
      }
    },
    onEvaluate(e) {
      this.orderId = e.order_id;
      this.visible = true;
      this.xArr = [
        { type: true },
        { type: true },
        { type: true },
        { type: true },
        { type: true }
      ];
    },
    handleOk(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let fee = 0;
          this.xArr.forEach(ele => {
            if (ele.type) fee++;
          });
          EVALUATE_TO({
            order_id: this.orderId,
            type: this.form.getFieldValue("radio"),
            fee
          }).then(res => {
            if (res.code != 200) {
              this.$message.error(res.msg);
              return;
            } else {
              this.$message.success(res.msg);
              this.getBought();
              this.visible = false;
            }
          });
        }
      });
    },
    close() {},
    getBought() {
      MY_BOUGHT({
        page: this.page,
        pageshow: 10,
        type: this.type,
        cate_id: this.cateId,
        search: this.search
      }).then(res => {
        if (res) {
          this.list = res.data.list;
          this.total = res.data.count;
        } else {
          this.list = [];
        }
      });
    },
    onChange(page) {
      this.page = page;
      this.getBought();
    },
    handleOkTwo(e) {
      e.preventDefault();
      SET_APPLY({
        refund_id: this.rtype,
        test: this.rvalue,
        image: this.icon,
        order_id: this.refundGanme.order_id
      }).then(res => {
        if (res.code != 200) {
          this.$message.error(res.msg);
          return;
        } else {
          this.$message.success(res.msg);
          this.getBought();
          this.isRefund = false;
        }
      })
    },
    closeTwo() {},
    customRequest(file) {
      this.loading = true;
      this.inputUpload(file.file, file.filename);
    },
    inputUpload(e, n) {
      let that = this;
      let random1 = parseInt(Math.random() * 100000);
      let random2 = parseInt(Math.random() * 100000);
      let time = new Date().getTime();
      let d = e.name.lastIndexOf(".");
      let hz = e.name.substring(d);
      let fileName = "" + random1 + random2 + time + hz;
      let observable = qiniu.upload(e, fileName, this.qnToken);
      observable.subscribe({
        next() {},
        error() {
          that.$message.error("上传失败！");
        },
        complete(res) {
          that.loading = false;
          if (n == "icon") {
            that.icon = "https://oss.itemplay.com/" + res.key;
          }
        }
      });
    },
    handleChange(value) {
      this.rtype = value
    },
  }
};
</script>
<style lang="less" scoped>
.wrap {
  border: 3px solid #0084ff;
  border-radius: 6px;
  padding: 10px;
  .w-title {
    height: 40px;
    line-height: 40px;
    background: #0084ff;
    color: #fff;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 16px;
  }
}
.search {
  width: 330px;
}
.table {
  margin-top: 20px;
  .table-n {
    width: 200px;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .table-img {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
}
.pagination {
  margin: 70px auto 60px;
  text-align: center;
}

.refund {
  padding: 10px;
  .r-one {
    display: flex;
    margin-bottom: 20px;
    .r-img {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }
    .r-title {
      flex: 1;
    }
  }
  .r-two {
    .rt-item {
      display: flex;
      margin-bottom: 10px;
      .ri-title {
        margin-right: 10px;
      }
    }
  }
}

</style>